<template>
  <div class="booktop">
    <div class="booktop_body">
      <div class="booktop_body_top">
        <h3>图书查询</h3>
      </div>
      <el-divider />
      <div class="booktop_body_main">
        <div class="booktop_body_main_item">
          <el-input v-model="formData['type']" placeholder="图书类别" />
        </div>
        <div class="booktop_body_main_item">
          <el-input v-model="formData['name']" placeholder="图书名称" />
        </div>
        <div class="booktop_body_main_item">
          <el-input v-model="formData['press']" placeholder="出版社" />
        </div>
        <div class="booktop_body_main_restart">
          <el-button @click="restart">重置</el-button>
        </div>
        <div class="booktop_body_main_restart">
          <el-button type="primary" @click="searchBooks">查询</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ElMessage } from "element-plus";
import { watch, ref } from "vue";
export default {
  props: {
    modelValue: {
      type: Object,
      required: true,
    },
  },
  emits: ["update:modelValue", "restart"],
  setup(props, { emit }) {
    const formData = ref({ ...props.modelValue });
    watch(
      formData,
      (newVal) => {
        emit("update:modelValue", newVal);
      },
      { deep: true }
    );

    const restart = () => {
      emit("restart");
    };

    const searchBooks = () => {
      if (
        formData.value.name == "" &&
        formData.value.press == "" &&
        formData.value.type == ""
      ) {
        ElMessage({
          message: "你还没输入搜索内容",
          type: "warning",
        });
        return;
      }
      emit("searchBooks", formData.value);
    };
    return {
      formData,
      restart,
      searchBooks,
    };
  },
};
</script>

<style lang="scss" scope>
.booktop {
  display: flex;
  justify-content: left;
  width: 100%;
  &_body {
    width: 100%;
    &_top {
      text-align: left;
    }
    &_main {
      display: flex;
      &_restart {
        height: 100%;
        margin-right: 5px;
      }
      &_item {
        width: 15%;
        margin-right: 5px;
        overflow: hidden;
      }
    }
  }
}
</style>
